<template>
  <a-modal
    v-model:visible="visible"
    :title-align="'start'"
    :width="width"
    :mask-closable="false"
    @before-ok="handleOk"
    @cancel="pophandleCancel"
  >
    <template #title> {{ props.titleText }} </template>
    <slot name="content" />
    <div>
      {{ props?.contentText }}
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, defineProps } from 'vue';

  const visible = ref(true);
  const props = defineProps({
    titleText: { type: String },
    contentText: { type: String },
    popVisibleflag: { type: Boolean },
    width: { type: Number, default: 850 },
  });
  const emit = defineEmits(['handleOk', 'handleCancel']);

  const handleOk = (done: any) => {
    emit('handleOk', false, done);
  };

  const pophandleCancel = () => {
    emit('handleCancel', false);
  };
</script>
